<template>
  <section class="login background page">

    <el-form ref="loginForm" size="medium" :model="loginForm" class="loginForm">
      <div class="cat catCs bodySlant earsBasic" v-if="false">
        <div class="face" />
        <div class="features" />
      </div>
      <div class="title">后台管理系统</div>
      <el-form-item prop="username" label="" :rules="loginFormRules.username">
        <el-input v-model="loginForm.username" maxlength="15" placeholder="请输入账号" />
      </el-form-item>

      <el-form-item prop="password" label="" :rules="loginFormRules.password">
        <el-input v-model="loginForm.password" type="password" maxlength="60" placeholder="请输入密码" />
      </el-form-item>

      <el-form-item prop="password" label="" :rules="loginFormRules.captcha">
        <el-input placeholder="请输入验证码" v-model="loginForm.captcha" maxlength="6">
          <el-image @click="handleRefreshCaptcha" slot="append" :src="captchaBase"></el-image>
        </el-input>
      </el-form-item>

      <div class="button-group">
        <el-button size="medium"  type="primary" @click="handleSubmitForm('loginForm')">登录</el-button>
        <el-button size="medium"  @click.native.prevent="handleResetForm('loginForm')">取消</el-button>
      </div>
    </el-form>
  </section>
</template>

<script>
// import MD5 from 'js-md5'
// import session from '@/utils/SessionStorageUtil'
const loginFormRules = {
  username: [
    { required: true, message: '账号不能为空', trigger: 'blur' },
    { min: 5, max: 15, message: '账号长度在 5 到 15 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 5, max: 60, message: '密码长度在 5 到 60 个字符', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '验证码不能为空', trigger: 'blur' },
    { min: 5, max: 60, message: '验证码长度为6个字符', trigger: 'blur' }
  ]
}
export default {
  name: 'LoginIndex',
  components: { },
  title: '登录',
  data () {
    return {
      loginFormRules: loginFormRules,
      loginForm: {
        username: 'admin',
        password: 'admin',
        captcha: '666666'
      },
      captchaBase: null,
      captchaID: null
    }
  },
  watch: {
  },
  mounted () {
  },
  methods: {
    /**
     * 登录
     * @param formName
     */
    handleSubmitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push('/home')
          // this.login()
        } else {
          return false
        }
      })
    },
    // 获取验证码
    // async getCaptcha () {
    //   const { result } = null
    //   this.captchaBase = 'data:image/png;base64,' + result
    //   this.captchaID = result.captchaId
    // },
    // 验证登录
    // async login () {
    //   const params = {
    //     captchaCode: this.loginForm.captcha,
    //     captchaId: this.captchaID,
    //     loginName: this.loginForm.username,
    //     password: MD5(this.loginForm.password)
    //   }
    //   await this.getCaptcha()
    //   const { result } = null
    //   if (result) {
    //     const token = { token: result.token, type: result.type }
    //     session.SET('big_data_token', token)
    //     this.$message({ message: '登录成功', type: 'success', duration: 1500 })
    //     await this.$router.push('/home')
    //   } else {
    //     this.loginForm.captcha = ''
    //   }
    // },
    // 刷新验证码
    handleRefreshCaptcha () {
      // this.getCaptcha()
    },
    // 取消登录
    handleResetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
/**/
.catCs:before,.catCs:after {
  content: ""
}
.catCs,.catCs:before,.catCs:after {
  position: absolute
}
.face,.face:before,.face:after,.features,.features:before,.features:after {
  position: absolute
}

.face:before,.face:after,.features:before,.features:after {
  content: ""
}
.bodySlant {
  background-color: #409EFF;
  border-radius: 4px;
  transform-origin: 50% 100%;
  transform: perspective(300px) rotateX(20deg)
}
.earsBasic:before,.earsBasic:after {
  width: 0;
  height: 0;
  top: -25px;
  border-top: 28px solid transparent;
  border-bottom: 20px solid transparent
}

.earsBasic:before {
  border-left: 20px solid #409EFF;
  left: 0
}

.earsBasic:after {
  border-right: 20px solid #409EFF;
  right: 0
}
.cat {
  width: 90px;
  height: 100px;
  top: -80px;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
}

.cat .face {
  top: 22px;
  left: 20px;
  width: 6px;
  height: 6px;
  background-color: #000;
  border-radius: 50%;
  box-shadow: 44px 0 #000;
  animation: blink 1s infinite linear;
  @keyframes blink {
    32% {height: 6px}
    38% {height: 1px}
    42% {height: 1px}
    48% {height: 6px} }
}

.cat .face:before,.cat .face:after {
  top: 14px;
  left: 10px;
  z-index: 5;
  width: 16px;
  height: 20px;
  border-radius: 50%/40%;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid transparent;
  border-top: 2px solid transparent;
  box-shadow: 0 0 #000
}

.cat .face:after {
  left: 24px;
  transform: rotateY(180deg)
}

.cat .features {
  top: 44px;
  left: 11px;
  width: 20px;
  height: 1px;
  background-color: #000;
  box-shadow: 0 5px #000,48px 0 #000,48px 5px #000
}

.cat .features:after {
  left: 30px;
  top: -6px;
  width: 6px;
  height: 6px;
  background-color: #000;
  border-radius: 50%;
  box-shadow: 2px 0 #000,1px 1px #000;
  animation: yawn 4s infinite linear;
  @keyframes yawn {
    32% {box-shadow: 2px 0 #000,1px 1px #000,0px 16px transparent,2px 16px transparent,1px 18px transparent}
    35% {box-shadow: 2px 0 #000,1px 1px #000,0px 16px #650000,2px 16px #650000,1px 18px transparent}
    38% {box-shadow: 2px 0 #000,1px 1px #000,0px 16px #650000,2px 16px #650000,1px 18px #650000}
    42% {box-shadow: 2px 0 #000,1px 1px #000,0px 16px #650000,2px 16px #650000,1px 18px #650000}
    45% {box-shadow: 2px 0 #000,1px 1px #000,0px 16px #650000,2px 16px #650000,1px 18px transparent}
    48% {box-shadow: 2px 0 #000,1px 1px #000,0px 16px transparent,2px 16px transparent,1px 18px transparent}
  }
}

.cat .features:before {
  top: 10px;
  left: 74px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 5px solid #409EFF;
  border-left: 0;
  border-top: 0
}
/**/
.background{
  height: 100%;
  overflow: hidden;
  background: linear-gradient(0deg,
    rgba(101,0,94,.5) 3%,
    rgba(60,132,206,.9) 38%,
    rgba(48,238,226,.9) 68%,
    rgba(255,25,25,.5) 98%);
  animation: gradient 20s ease infinite;
  background-size: 400% 400%;
  animation-timing-function: linear;
  @keyframes gradient {
    0% {background-position: 0 0}
    50% {background-position: 100% 100%}
    100% {background-position: 0 0}
  }
}
.loginForm{
  padding: 20px 40px 0 40px;
  background: rgba(255, 255, 255, .9);
  width: 300px;
  height: 340px;
  border-radius: 4px;
  box-shadow: 0 0 10px #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  .title{
    height: 70px;
    line-height: 60px;
    text-align: center;
    font-size: 22px;
  }
  .button-group{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  ::v-deep .el-input-group__append{
    padding: 0;
    height: 30px;
    font-size: 0;
    cursor: pointer;
    .el-image{
      width: 72px;
      height: 34px;
      border-radius: 0 4px 4px 0;
      img{max-height: 100%;}
    }
  }
}
</style>
